<template>
	<view class="shop-box">
		<view class="shop-user">
			<view class="shop-user_top">
				<view class="user-title">
					<text class="user-name">{{userInfo.name}}</text><text class="user-addr">{{userInfo.area}}</text>
				</view>
				<view class="user-data margin-top-xs">
					<text class="user-all">车源 <text
							class=" margin-left-xs text-bold">{{userInfo.pyq+userInfo.upload}}</text></text>
					<text class="user-car">同行 <text class="margin-left-xs text-bold">{{userInfo.upload}}</text></text>
					<text class="user-view">访问量 <text
							class="margin-left-xs text-bold">{{userInfo.viewcount}}</text></text>
				</view>
			</view>
			<view class="shop-user_avatar">
				<uv-avatar :src="userInfo.userimgsrc" :size="55"></uv-avatar>
			</view>

		</view>

		<uv-tabs :list="tablist" :current="currentTab" @change="changeTab" :customStyle="tbsCustomStyle"></uv-tabs>
		<view v-if="currentTab==0">
			<fy-pyq-item v-for="item in list" :key="item.id" :pyqInfo="item"></fy-pyq-item>
		</view>
		<view v-if="currentTab==1">
			<fy-car-item v-for="item in list" :key="item.id" :carInfo="item"></fy-car-item>
		</view>
		<view v-if="currentTab==2">
			<fy-need-item v-for="item in list" :key="item.id" :needInfo="item"></fy-need-item>
		</view>
		<uv-load-more :status="status" @loadmore="loadMore" :marginTop="10" :marginBottom="10" />
		<fy-user-nav :userInfo="userInfo"></fy-user-nav>
	</view>
</template>

<script>
	import { queryUserNeedBuyInfoByUid, queryUserInfo, queryUserCarInfoByUid, queryUserPyqByUid } from '@/utils/http.js'
	import baseconfig from '@/config.js'
	import { encryptphone, timespantoYMD } from '@/common/tools.js'
	export default {
		data() {
			return {
				userInfo: {},
				tbsCustomStyle: { BackgroundColor: '#fff', MarginTop: '5px' },
				tablist: [{ name: '朋友圈车源' }, { name: '同行车源' }, { name: '同行求购' }],
				queryForm: {
					start: 0,
					length: 10,
					iscancel: 0,
					userid: 0,
					isend: 0
				},
				currentTab: 0,
				list: [],
				total: 0,
				status: 'loadmore',
			}
		},
		onLoad(option) {
			this.queryForm.userid = option.userid
			this.fetchUser()
			this.fetchList()
		},
		methods: {
			changeTab(e) {
				const { index, name } = e
				this.currentTab = index
				this.list = []
				this.queryForm.start = 0
				this.fetchList()
			},
			fetchList() {
				this.status = 'loading'
				if (this.currentTab == 0) {
					this.fetchPyq()
				}
				if (this.currentTab == 1) {
					this.fetchCar()
				}
				if (this.currentTab == 2) {
					this.fetchNeed()
				}
			},
			fetchPyq() {
				queryUserPyqByUid(this.queryForm).then(res => {
					const { total, rows, count } = res.data
					rows.map(arr => {
						arr.imglist = []
						arr.avatar = baseconfig.api_url + arr.userimgsrc
						if (arr.imgsrc) {
							var _list = arr.imgsrc.split(',')
							_list.forEach(imgarr => {
								arr.imglist.push(baseconfig.api_url + imgarr)
							})
						}
					})


					this.total = total
					Object.assign(this.list, rows)
					if ((this.queryForm.start + this.queryForm.length) >= total) {
						this.status = 'nomore'
					}
				})


			},
			fetchCar() {
				queryUserCarInfoByUid(this.queryForm).then(res => {
					const { total, rows, count } = res.data
					rows.map(arr => {
						var title = ''
						if (arr.regtime) {
							title += arr.regtime + '上牌|'
						}
						if (arr.mileage) {
							title += arr.mileage + '万公里|'
						}
						var _add = arr.platelocation.split(" ")
						title += _add[1]
						arr.desc = title
						arr.imglist = []
						var imglist = arr.imgsrc ? arr.imgsrc.split(',') : []
						imglist.forEach(imgarr => {
							arr.imglist.push(baseconfig.api_url + imgarr)
						})
					})
					this.total = total
					Object.assign(this.list, rows)
					if ((this.queryForm.start + this.queryForm.length) >= total) {
						this.status = 'nomore'
					}
				})
			},
			fetchNeed() {
				queryUserNeedBuyInfoByUid(this.queryForm).then(res => {
					const { total, rows, count } = res.data
					rows.map(arr => {
						arr.time = timespantoYMD(arr.createtime)
						arr.encry = encryptphone(arr.phone)
					})
					this.total = total
					Object.assign(this.list, rows)
					if ((this.queryForm.start + this.queryForm.length) >= total) {
						this.status = 'nomore'
					}

				})
			},
			fetchUser() {
				queryUserInfo(this.queryForm.userid).then(res => {
					const { data } = res
					data.userimgsrc = data.imgsrc ? baseconfig.api_url + data.imgsrc : ''
					var t = data.ipplace.split(' ')
					data.area = t[2]
					this.tablist[0].name = `朋友圈车源(${data.pyq?data.pyq:0})`
					this.tablist[1].name = `同行车源(${data.upload?data.upload:0})`
					this.tablist[2].name = `同行求购(${data.need?data.need:0})`
					this.userInfo = data
				})
			},
		}
	}
</script>

<style lang="scss">
	.shop-user {
		background-color: #3d9eff;
		padding: 40upx 30upx;
		display: flex;
		flex-direction: row;

		&_top {
			flex: 1;

			.user-title {
				color: #fff;

				.user-name {
					font-size: 40upx;
					font-weight: 540;
				}

				.user-addr {
					color: #fff;
					font-size: 28upx;
					margin-left: 15upx;
					border-left: #fff 1upx solid;
					padding-left: 15upx;
				}
			}

			.user-data {
				color: #fff;

				.user-all {
					padding-right: 15upx;
					border-right: #fff 1upx solid;
				}

				.user-car {
					padding: 0 15upx;
					border-right: #fff 1upx solid;
				}

				.user-view {
					padding-left: 15upx;
				}
			}
		}

		&_avatar {
			align-items: center;
			width: 60px;
		}
	}
	.shop-box .uv-album__row__wrapper__text{
		border-radius: 6upx;
	}
</style>